<template>
  <div class="SiginContent">
    <mt-picker :slots="slots"  @change="onValuesChange"></mt-picker>
    <mt-button class="SiginContentItem" @click="handleSigin" >

      签到
    </mt-button>

    <div align="left">

      <div>你的机位号是{{sitement}}</div>
      <mt-button size="normal">当前周数：</mt-button><br>
      <mt-button size="normal">当前课程：</mt-button><br>
      <mt-button size="normal">当前教室：</mt-button><br/>
     <!--<div>经纬度:{{this.center.lng}},{{this.center.lat}}{{this.r}} </div>-->

    </div>

    <div class="home">
      <div id="allmap" class="allmap"></div>
    </div>

  </div>
</template>

<script>

  import { Button } from 'mint-ui';
  import { Picker } from 'mint-ui';
  import BMap from  'BMap';
  import axios from 'axios';
  import qs from 'qs'
  export default {
    name:'SiginInContent',
    components:{
      MtPicker:Picker,
      MtButton:Button
    },
    data() {
      return {
        type: 'tab',
        address_detail: null,
        // center: {lng: 116.40387397, lat: 39.91488908},
        sitement:0,
        site1:0,
        site2:0,
        type: 'tab',

        slots: [
          {
            flex: 1,
            values: ['第一排', '第二排', '第三排', '第四排', '第五排', '第六排'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '=',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['第1号', '第2号', '第3号', '第4号', '第5号', '第6号','第7号','第8号','第9号','第10号'],
            className: 'slot3',
            textAlign: 'left'
          }
        ]
      };
    },

    methods:{
      handleSigin:function () {
        this.sitement = (this.site1-1) *10+ this.site2;
        console.log(this.sitement);
      },
      getSiginInfo:function () {//得到可签到列表
        var _this = this;
        axios.post('http://www.thinkingfastandslow.xyz:8080/sas-manager-web/prosceniumStudentController/selectAllOpenAttendanceCourse',qs.stringify({
          studentid:'45',isattendance:'0'
        }))
          .then(this.getgetSiginInfoSucc)
          .catch(err => {
            console.log(err);
          });},
      getgetSiginInfoSucc:function (res) {
          console.log(res.data.data);
          var data = res.data.data;
          for (var i = 0; i < data.length ;i++){
            var courseId = data[i].courseid;
            var studentId = data[i].studentid;
            var _this = this;
          }
      },
      getgetSiginInfo2Succ:function (res) {
        console.log(res);
      },
      // ready () {
      //   let map = new BMap.Map('allmap')
      //   let point = new BMap.Point(this.center.lng, this.center.lat)
      //   map.centerAndZoom(point, 30)
      //   map.enableScrollWheelZoom(true)
      //   map.enableDoubleClickZoom(true)
      //   var geolocation = new BMap.Geolocation()
      //   geolocation.getCurrentPosition((r) => {
      //     if (r.point) {
      //     this.center.lng = r.longitude-0.0670203501123
      //     this.center.lat = r.latitude+ 0.030378001585614
      //
      //
      //     let markers = new BMap.Marker(r.point)
      //     map.addOverlay(markers)
      //     map.panTo(r.point)
      //     map.centerAndZoom(r.point, 60)
      //   }
      // }, { enableHighAccuracy: true })
      // },
      onValuesChange(picker, values) {
        // console.log(picker.getValues()[0])//行坐标
        // console.log(picker.getValues()[1])//纵坐标
        switch (picker.getValues()[0]){
          case '第一排':
            this.site1 = 1;
            break;
          case '第二排':
            this.site1 = 2;
            break;
          case '第三排':
            this.site1 = 3;
            break;
          case '第四排':
            this.site1 = 4;
            break;
          case '第五排':
            this.site1 = 5;
            break;
          case '第六排':
            this.site1 = 6;
            break;
        }
        switch (picker.getValues()[1]){
          case '第1号':
            this.site2 = 1;
            break;
          case '第2号':
            this.site2 = 2;
            break;
          case '第3号':
            this.site2 = 3;
            break;
          case '第4号':
            this.site2 = 4;
            break;
          case '第5号':
            this.site2 = 5;
            break;
          case '第6号':
            this.site2 = 6;
            break;
          case '第7号':
            this.site2 = 7;
            break;
          case '第8号':
            this.site2 = 8;
            break;
          case '第9号':
            this.site2 = 9;
            break;
          case '第10号':
            this.site2 = 10;
            break;
        }
      },
    },
    mounted () {
      // this.ready();
      this.getSiginInfo();
    },
  };
</script>

<style scoped>
  .SiginContent{
    margin-top: 2rem;
  }
  .SiginContentItem{
    margin-top: 1rem;
  }
 .XSDFXPage{
    width: 100%;
    height: 200%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }
  #allmap{
    width: 100%;
    height: 13rem;
  }
</style>
